<!--  -->
<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>规格参数</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-alert
        title="注意：只允许为第三级分类设置相关参数！"
        type="warning"
        show-icon
        :closable="false"
      >
      </el-alert>
      <el-row type="flex" align="middle" justify="start" class="spe-cate">
        <el-col :span="5">请选择商品分类:</el-col>
        <el-col :span="10">
          <el-cascader
            ref="catRef"
            v-model="category"
            :options="categoryList"
            :props="props"
            @change="handleChange"
          ></el-cascader>
        </el-col>
      </el-row>
      <!-- <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane label="动态参数" name="first" >
            <el-button type="primary" size="mini" :disabled="tabDisabled">添加参数</el-button>
        </el-tab-pane>
        <el-tab-pane label="静态属性" name="second" >
            <el-button type="primary" size="mini" :disabled="tabDisabled">添加属性</el-button>
        </el-tab-pane>
      </el-tabs> -->
      <el-card>
        <el-breadcrumb
          separator-class="el-icon-arrow-right"
          v-if="!tabDisabled"
        >
          <el-breadcrumb-item>{{ l1name }}</el-breadcrumb-item>
          <el-breadcrumb-item>{{ l2name }}</el-breadcrumb-item>
          <el-breadcrumb-item>{{ l3name }}</el-breadcrumb-item>
        </el-breadcrumb>
        <router-view></router-view>
      </el-card>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      category: [],
      categoryList: [],
      props: {
        value: "id",
        label: "name",
      },
      // activeName: "first",
      specGroupList: [],
    };
  },

  created() {
    this.queryCategoryList();
  },
  computed: {
    tabDisabled() {
      return this.category.length !== 3;
    },
    l1name() {
      return this.$refs["catRef"].getCheckedNodes()[0].parent.parent.label;
    },
    l2name() {
      return this.$refs["catRef"].getCheckedNodes()[0].parent.label;
    },
    l3name() {
      return this.$refs["catRef"].getCheckedNodes()[0].label;
    },
  },
  methods: {
    async queryCategoryList() {
      const res = await this.$http.get("/category/allLevel");
      //   console.log(res);
      if (res.flag) {
        this.categoryList = res.data;
      }
    },
    handleChange(v) {
      // console.log(v);
      // console.log(this.$refs['catRef'].getCheckedNodes());。
      // this.specGroupList = []
      // this.querySpecGroupListByCid(v[2]);
       this.$router.push({path: '/specGroup', query: {cid: v[2], enabled: true}})
      //  this.$router.push({name: 'specGroup', params: {cid: v[2], enabled: true}})
    },
    handleTabClick(v) {},
    queryNameById(id) {},
    
    
  },
};
</script>

<style lang="scss" scoped>
.spe-cate {
  margin: 15px 0;
}
</style>
